﻿
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>

    <style>

        table {
            width: 100%;
            border-collapse: collapse;
        }

      

        th {
            background-color: #FFD553;
            text-align: right;
            width: 120px;
        }

        td {
            padding: 6px;
        }

        select, input, textarea {
            width: 200px;
            box-sizing: border-box;
        }

        textarea {
            height: 80px;
        }




        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }

        /* 只对class为data-table的表格应用边框 */
        .data-table, .data-table th, .data-table td {
            border: 1px solid #000;
        }

        .button-container {
            position: absolute;
            top: 0;
            right: 10px;
            margin-top: -5px; /* 与表格顶部的距离 */
            z-index: 10; /* 确保按钮在上方 */
        }

            .button-container button {
                margin-left: 10px; /* 按钮之间的间距 */
            }


        body {
            background-color: #FFFFCC;
        }

    </style>

</head>

<body>

    <div id="app">
        <span>您正在做的业务是：人力资源--人力资源档案管理--人力资源档案变更</span>
        <form asp-action="Update" method="post">
            <table class="data-table">

                <tr>
                    <th>档案编号</th>
                    <td colspan="5">

                        {{ form.human_id}}

                        <el-input type="hidden" v-model="form.huf_id"></el-input>
                      
                       

                    </td>


                    <td rowspan="3" style="padding: 10px,10px,10px,30px; border: none; position: absolute;">

                        <el-upload class="avatar-uploader"
                                   action="/HRFR/WJSC"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl || fileName" :src="getImageUrl()" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>


                        <input type="hidden" name="imageFile" v-model="imageFile" />

                        <input type="hidden" name="id" v-model="id" />

                    </td>



                </tr>

                <tr>
                    <th>I级机构</th>
                    <td>
                       
                        {{ form.first_kind_name}}
                    </td>

                    <th>II级机构</th>
                    <td>
                        {{ form.second_kind_name}}
                      
                    </td>

                    <th>III级机构</th>
                    <td>
                        {{ form.second_kind_name}}
                     

                    </td>
                </tr>

                <!-- 职位信息 -->
                <tr>
                    <th>职位分类</th>
                    <td>
                        {{ form.human_major_kind_name}}
                      

                    </td>

                    <th>职位名称</th>
                    <td>

                        {{ form.hunma_major_name}}
                       

                    </td>

                    <th>职称</th>
                    <td>
                        {{ form.human_pro_designation}}

                       

                    </td>
                </tr>

                <!-- 基础信息 -->
                <tr>
                    <th>姓名</th>
                    <td>
                        {{ form.human_name}}
                    
                    </td>
                    <th>性别</th>
                    <td>
                      
                        {{ form.human_sex}}

                    </td>
                    <th>EMAIL</th>
                    <td>
                       
                        {{ form.human_email}}
                    </td>
                </tr>

                <!-- 联系方式 -->
                <tr>
                    <th>电话</th>
                    <td>
                        {{ form.human_telephone}}

                    </td>
                    <th>QQ</th>
                    <td>
                        
                        {{ form.human_qq}}

                    </td>
                    <th>手机</th>
                    <td>
                        {{ form.human_mobilephone}}
                       
                    </td>
                </tr>

                <!-- 地址信息 -->
                <tr>
                    <th>住址</th>
                    <td colspan="3"> 
                       
                        {{ form.human_address}}
                     </td>
                    <th>邮编</th>
                    <td>
                        {{ form.human_postcode}}
                     
                    </td>
                </tr>

                <!-- 个人背景 -->
                <tr>
                    <th>国籍</th>
                    <td>
                        {{ form.human_nationality}}

                       


                    </td>
                    <th>出生地</th>
                    <td>

                        {{ form.human_birthplace}}
                       

                    </td>
                    <th>生日</th>
                    <td>
                        {{ form.human_birthday}}

                     

                    </td>
                    <th>民族</th>
                    <td>
                        
                        {{ form.human_race}}

                    </td>

                </tr>

                <!-- 政治信息 -->
                <tr>
                    <th>宗教信仰</th>
                    <td>

                        {{ form.human_religion}}
                       


                    </td>
                    <th>政治面貌</th>
                    <td>
                        {{ form.human_party}}

                  

                    </td>
                    <th>身份证号码</th>
                    <td>
                       
                        {{ form.human_id_card}}

                    </td>
                    <th>社会保障号码</th>
                    <td> 

                        {{ form.human_society_security_id}}
                    
                     </td>
                </tr>

                <!-- 教育信息 -->
                <tr>
                    <th>年龄</th>
                    <td>
                        {{ form.human_age}}
                      
                    </td>
                    <th>学历</th>
                    <td>
                        {{ form.human_educated_degree}}
           
                    </td>
                    <th>教育年限</th>
                    <td>

                      

                        {{ form.human_educated_years}}

                    </td>
                    <th>学历专业</th>
                    <td>

                        {{ form.human_educated_major}}
                    


                    </td>
                </tr>

                <!-- 薪酬信息 -->
                <tr>
                    <th>薪酬标准</th>
                    <td>
                        {{ form.salary_standard_name}}
                     

                    </td>
                    <th>开户行</th>
                    <td>
                        {{ form.human_bank}}
                      
                     </td>
                    <th>帐号</th>
                    <td>
                        {{ form.human_account}}
                      
                        
                    </td>
                    <th>复核人</th>
                    <td>
                        {{ form.register}}
                        
                     </td>
                </tr>

                <!-- 时间与特长 -->
                <tr>
                    <th>复核时间</th>
                    <td>
                        {{ form.check_time}}
                       

                      


                    </td>
                    <th>特长</th>
                    <td>

                        {{ form.human_speciality}}

                    </td>
                    <th>爱好</th>
                    <td>
                      
                        {{ form.human_hobby}}

                    </td>
                </tr>

                <!-- 文本区域 -->
                <tr>
                    <th>档案附件</th>
                    <td colspan="5">
                        {{ form.attachment_name}}
                     
                     </td>
                </tr>


                <tr>
                    <th>个人履历</th>
                    <td colspan="7">  <el-input v-model="form.human_histroy_records" type="textarea" :rows="2" /></td>
                </tr>
                <tr>
                    <th>家庭关系信息</th>
                    <td colspan="7"> <el-input v-model="form.human_family_membership" type="textarea" :rows="2" /> </td>
                </tr>
                <tr>
                    <th>备注</th>
                    <td colspan="7"> <el-input v-model="form.remark" type="textarea" :rows="2" /> </td>
                </tr>
         

            </table>

            <!-- 按钮容器，放置在表格外部 -->
            <div class="button-container">
                <el-button type="button" v-on:click="deleteRecord">删除</el-button>
                <el-button type="button" v-on:click="fanhui">返回</el-button>
            </div>

        </form>
    </div>



    <script type="text/javascript">
                    const { createApp, ref, onMounted, reactive,ElMessage } = Vue;
                const app = createApp({
                    setup()
                    {

                        // 定义响应式form对象，与Human_File模型字段对应
                const form = reactive({
                    huf_id:'',
                    human_id: '',
                    first_kind_name: '',
                    second_kind_name: '',
                    third_kind_name: '',
                    human_major_kind_name: '',
                    hunma_major_name: '',
                    human_pro_designation: '',
                    human_name: '',
                    human_sex: '',
                    human_email: '',
                    human_telephone: '',
                    human_qq: '',
                    human_mobilephone: '',
                    human_address: '',
                    human_postcode: '',
                    human_nationality: '',
                    human_birthplace: '',
                    human_birthday: '',
                    human_race: '',
                    human_religion: '',
                    human_party: '',
                    human_id_card: '',
                    human_society_security_id: '',
                    human_age: '',
                    human_educated_degree: '',
                    human_educated_years: '',
                    human_educated_major: '',
                    salary_standard_name: '',
                    human_bank: '',
                    human_account: '',
                    register: '',
                    check_time: '',
                    human_speciality: '',
                    human_hobby: '',
                    attachment_name: '',
                    human_histroy_records: '',
                    human_family_membership: '',
                    remark: ''
                });


                        function fanhui(){
                            window.location.href='/DASC/LJSC';
                        }


                        const  imageFile=ref('');

                         const imageUrl = ref(''); // 图片URL

                           const fileName = ref(''); // 文件名


                            


                 

        // 获取图片完整路径
        const getImageUrl = () => {
            if (!imageFile.value) return '';

                try {
                    // 从文件名解析日期（假设文件名格式为 YYYYMMDDHHmmssfff.ext）
                    const fullName = imageFile.value.trim();
                    const datePart = fullName.substring(0, 8);
                    const year = datePart.substring(0, 4);
                    const month = datePart.substring(4, 6);
                    const day = datePart.substring(6, 8);

                    // 构建路径：/年/月/日/文件名
                    const path = `/Uploader/${year}/${month}/${day}/${fullName}`;
                    console.log('解析日期生成路径:', path);
                    return path;
                }
                catch (error) {
                    console.error('文件名解析失败:', error);
                    //  fallback: 使用当前日期（仅作为临时方案）
                    const today = new Date();
                    const y = today.getFullYear();
                    const m = String(today.getMonth() + 1).padStart(2, '0');
                    const d = String(today.getDate()).padStart(2, '0');
                    const fallbackPath = `/Uploader/${y}/${m}/${d}/${imageFile.value}`;
                    console.log('当前日期生成路径:', fallbackPath);
                    return fallbackPath;
                }
        };

                     // 图片上传前验证
            const beforeAvatarUpload = (rawFile) => {
                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                const isAllowedType = allowedTypes.includes(rawFile.type);
                const isLt2M = rawFile.size / 1024 / 1024 < 2;

                if (!isAllowedType) {
                    ElMessage.error('仅支持 JPG/JPEG/PNG/GIF 格式图片');
                    return false;
                }
                if (!isLt2M) {
                    ElMessage.error('文件大小不能超过 2MB');
                    return false;
                }

                // 预览图片
                const reader = new FileReader();
                reader.onload = (e) => {
                    imageUrl.value = e.target.result;
                };
                reader.readAsDataURL(rawFile);



                return true;
            };




        // 处理图片上传成功
         const handleAvatarSuccess = (response, uploadFile) => {
            console.log('后端返回数据:', uploadFile);
            // 更新文件名和图片URL
            fileName.value = uploadFile.response.wjnames;
            imageFile.value = fileName.value;
            imageUrl.value = getImageUrl();
        };



           // 2. 从URL获取ID
                const getUrlId = () => {
                    const urlParams = new URLSearchParams(window.location.search);
                    return parseInt(urlParams.get('id') || '0');
                };




                // 3. 加载档案信息
                const loadHumanFile = async (id) => {
                   

                  
                        // 调用API获取数据
                        const response = await axios.get(`/DASC/GetHumanFile/?id=${id}`);

                        if (response.status === 200) {
                            // 将API返回的数据赋值给form对象
                            Object.assign(form, response.data);

                            // 处理图片
                            if (response.data.human_picture) {
                                imageFile.value = response.data.human_picture;
                                imageUrl.value = getImageUrl(imageFile.value);
                            }
                        } 
                };

                  // 5. 组件挂载时初始化
                onMounted(() => {
                    const id = getUrlId();
                    if (id > 0) {
                        loadHumanFile(id);
                    } 
                });


                // 新增：逻辑删除方法
        const deleteRecord = async () => {
            const huf_id = form.huf_id;

              const response = await axios.post('/DASC/DeleteHumanFile',{huf_id} );

                const result = response.data;
                if (result.success) {
                   
                     window.location.href='/DASC/SCZS'

                }



        }

                        return{
                            fanhui,
                            imageFile,
                            imageUrl,
                            getImageUrl,
                            fileName,
                            beforeAvatarUpload,
                            handleAvatarSuccess,
                            form,
                            deleteRecord,
                          
                            
                        }


                    }

        })
        app.use(ElementPlus).mount('#app');

    </script>



</body>

</html>    